<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo10-下拉框联动效果</title>
    <link rel="stylesheet" href="../plugins/bootstrap-4.5.3-dist/css/bootstrap.min.css">
    <!-- jquery.js要放在bootstrap.min.js的前面。理由：bootstrap的一些动画样式需要用到jquery -->
    <script src="../plugins/jquery/jquery-3.5.1.min.js"></script>
    <script src="../plugins/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <script src="../plugins/vue/axios.min.js"></script>

</head>
<body class="container" style="margin-top: 20px">
<div id="app">
    <select v-model="selectedFirstType" class="form-control" style="margin-top: 30px" @change="changeItem">
        <!-- :value 等价于 v-bind:value  。表示value的值将会是一个变量 -->
        <option :value="item.id" v-for="item in firstTypeList">
            {{item.typeName}}&nbsp;&nbsp;：&nbsp;&nbsp;{{item.typeDesc}}
        </option>

    </select>
    <select v-model="selectedSecondType" class="form-control" style="margin-top: 30px">
        <option :value="item.id" v-for="item in secondTypeList">
            {{item.typeName}}&nbsp;&nbsp;：&nbsp;&nbsp;{{item.typeDesc}}
        </option>
    </select>

    <div style="text-align: center">
        <button class="btn btn-success" style="width: 400px;height: 50px;margin-top: 20px;" @click="submitData">提交数据</button>
    </div>
</div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            firstTypeList: [], //保存一级分类的数据
            secondTypeList: [],//保存二级分类的数据
            selectedFirstType: null,
            selectedSecondType: null
        },
        methods: {
            getFirstTypeList() {//后台查询一级分类数据列表
                axios.get("/getFirstTypeList").then(res => {
                    this.firstTypeList = res.data;
                })
            },
            changeItem() {//每次一级分类的选项修改后，就根据选择的一级分类的唯一标识ID，调用后台方法，查对应二级分类数据
                // alert("~~~"+this.selectedFirstType)
                // axios.get("/getFirstTypeList/"+this.selectedFirstType).then(res=>{
                // `这个符号是怎么按出来的？ 英文输入法下键盘数字1左边那个【~】的按键
                axios.get(`/getSecondTypeList/${this.selectedFirstType}`).then(res => {
                    this.secondTypeList = res.data;
                })
            },

            submitData(){
                alert("选择的一级分类："+this.selectedFirstType+",二级分类："+this.selectedSecondType)
            }
        },
        created() {//这个方法是：界面刚刚一加载完成，就会自动访问的方法（创建后的....）
            this.getFirstTypeList();
        }
    })


</script>


</html>